<template>
	<view class="travel-calendar flex--col">
		<view class="calendar-weekday flex--row">
			<view class="calendar-weekday-item flex--col" v-for="(schedule,index) in calendar" :key="index" role="button" @click="switchTravel(schedule)" :class="{'active':schedule.travel !== null}">
				<text class="text--thirdary-dark">{{schedule.weekday}}</text>
				<view class="weekday icon--middle flex--row text--main-dark"
					  :class="{'active':schedule.travel !== null}" role="button" :aria-label="schedule.label">{{schedule.day}}</view>
			</view>
		</view>
		<view class="calendar-schedule text--secondary-dark">
			<text>{{curTravelText}}</text>
		</view>
		
		<view class="calendar-route flex--col" v-if="curTravel !== null" >
			<view class="route-title flex--row">
				<text class="route-name text--main-dark">{{curRoute.name}}</text>
				<view class="route-tag text--secondary-dark">
					{{curRoute.category}}
				</view>
			</view>
			<RouteInfo :routeInfo="curRoute" v-if="curRoute"></RouteInfo>
		</view>
	</view>
</template>

<script>
	import RouteInfo from "./RouteInfo.vue"
	import * as TravelApi from "@/api/travel/travel.js"
	import * as RouteApi from "@/api/route/route.js"
	import {isEmpty,timeFormat} from "@/utils/util.js"
	import {REFRESH_CALENDAR } from "@/core/constant/event"
	const week_list=['Sun','Mon','Tue','Wed','Thu','Fri','Sat']
	export default{
		data(){
			return {
				recentTravels:[],
				calendar:[],
				curTravel:null,
				curRoute:null,
			}
		},
		components:{
			RouteInfo
		},
		computed:{
			curTravelText(){
				if(this.curTravel === null ){
					return "近期没有预约的出行。"
				}else{
					const time = timeFormat(this.curTravel.startTime,this.curTravel.endTime)
					return `${time.startTime} - ${time.endTime}  ${this.curRoute?.name}`
				}
			}
		},
		methods:{
			async getRouteData(){
				if(this.curTravel === null){
					return 		
				}
				this.curRoute = await RouteApi.routeDetail(this.curTravel.routeId)
			},
			renderCalendar(){
				
				this.calendar = []
				const currentDate = new Date(Date.now() - 24*3600*1000)
				for(let i = 0;i<7;i++){
					currentDate.setDate(currentDate.getDate()+1)
					const schedule = {
						day:currentDate.getDate(),
						weekday:week_list[currentDate.getDay()],
						travel:null,
						label:`${currentDate.getDate()}号无出行`,
					}
					for(const travel of this.$store.getters.inactiveTravels){
						const travelST = new Date(travel.startTime)
						if(travelST.getDate() !== currentDate.getDate()){
							continue
						}
						if(isEmpty(this.curTravel)){
							this.curTravel = travel
						}
						schedule.travel = travel
						schedule.label = `${currentDate.getDate()}有出行`
						break
					}
					this.calendar.push(schedule)
				}
			},
			async switchTravel(schedule){
				this.curTravel = schedule.travel
				await this.getRouteData()
			},
			async refreshCalendar(){
				this.curTravel = null
				this.curRoute = null
				this.renderCalendar()
				await this.getRouteData()
			},
		},
		async created(){
			await this.refreshCalendar()
			uni.$on(REFRESH_CALENDAR,this.refreshCalendar)
		}
	}
</script>

<style lang="scss" scoped>
	
	.text--main-dark{
		font-size: 24px;
		font-weight: 700;
		color:#555;
	}
	
	.text--secondary-dark{
		font-size: 16px;
		font-weight: 700;
		color:#333;
	}
	
	.text--thirdary-dark{
		font-size: 14px;
		font-weight: 500;
		color:#666;
	}
	
	
	
	.travel-calendar{
		gap:32rpx;
		.calendar-weekday{
			justify-content: space-between;
		}
		
		.calendar-weekday-item{
			align-items: center;
			gap:2px;
			
			&.active .weekday{
				border: solid 1.5px $main-color;
				position:relative;
				color: $main-color;
				
				&::after{
					position:absolute;
					content:'';
					bottom:-35%;
					border-radius: 10px;
					background-color: $main-color;
					width:80%;
					height: 10px;
					
				}
			}
			
			.weekday{
				border-radius:50%;
				border: solid 1.5px #333;
				align-items: center;
				justify-content: center;
			}
			
		}
		
		.calendar-schedule{
			padding:16px;
			border-radius:10px;
			background:rgba($main-color--light,0.4);
			color:$main-color;
			
			margin-bottom: 16rpx;
		}
		
		.calendar-route{
			@include border-four-roundings;
			padding:64rpx 32rpx;
			gap:54rpx;
			
			.route-title{
				justify-content: space-between;
				
			}
			.route-name{
				flex:3;
			}
			
			.route-tag{
				flex:1;
				border-radius: 10px;
				text-align:center;
				line-height: 1.2;
				padding:4px;
				color:#fff;
				background-color: rgba($main-color,0.8);
			}
		}
	}
</style>